<template>
  <view class="main-container" style="background-color: #dd302c">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="handleBack">
        <u-icon name="arrow-left" color="#FFF" size="20"></u-icon>
      </view>
      <view class="nav-title">人工智能易学大模型</view>
      <view class="nav-right" @tap="handleBack">
        <u-icon name="close" color="#FFF" size="20"></u-icon>
      </view>
    </view>
    <!-- 其他支付项目 -->
    <view class="box-content">
      <view class="service-items">
        <view class="service-grid">
          <view
            v-for="(item, index) in reportList"
            :key="index"
            class="service-item"
            v-if="item.isPaid"
          >
            <image
              :src="'/static/images/' + item.image"
              mode="aspectFit"
              class="service-icon"
            ></image>
            <view class="service-info">
              <text class="service-name">{{ userInfo.userName }}</text>
              <text class="report-desc"
                >{{ userInfo.gender }} {{ userInfo.solarDay }}</text
              >
            </view>
            <view class="service-right">
              <view class="pay-now" @tap="handleReport(item)">
                <text>{{ item.name }}报告</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部信息 -->
    <view class="footer-info">
      <text class="sub-text"
        >本站所有测试项目，均由AI大模型根据传统易学八字自动测算，如有雷同，纯属巧合。测算结果不作为您真正的人生指导策划，仅作娱乐参考!某些民俗占卜，仅作研究之用，请勿迷信!</text
      >
    </view>
  </view>
</template>

<script>
import pageData from "./data.js";
import { mapGetters } from "vuex";
import { trackPageView, trackButton } from "@/utils/track";

export default {
  name: "PayPage",
  data() {
    return {
      pageData,
      pageViewTracker: null,
    };
  },
  computed: {
    ...mapGetters("fortune", ["userInfo"]),
    ...mapGetters("system", ["userCount"]),
    ...mapGetters("payment", ["getPayStatus"]),
    // 合并所有报告数据
    reportList() {
      return [
        {
          name: "姻缘",
          image: "img-home.png",
          isPaid: this.getPayStatus("marriage"),
          url: "/pages/payResult/result",
        },
        ...this.pageData.reportItems.map((item, index) => ({
          ...item,
          isPaid: this.getPayStatus("other",index),
          url: `/pages/payResult/otherPay?index=${index}`,
        })),
        {
          name: "合婚",
          image: "img-home.png",
          isPaid: this.getPayStatus("hehun"),
          url: "/pages/hehun/index",
        },
      ];
    },
  },
  mounted() {
    this.pageViewTracker = trackPageView({
      reportKey: "进入测算报告页",
      reportVal: "浏览",
      pageName: "测算报告页",
    });
    this.pageViewTracker.start();
  },
  onHide() {
    if (this.pageViewTracker) this.pageViewTracker.stop();
  },
  onUnload() {
    if (this.pageViewTracker) this.pageViewTracker.stop();
  },
  methods: {
    handleBack() {
      uni.reLaunch({
        url: "/pages/home/index",
      });
    },

    // 统一处理报告跳转
    handleReport(item) {
      uni.navigateTo({ url: item.url });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./result.scss";
</style>
